import { init, h } from 'snabbdom'
import attributes from 'snabbdom/modules/attributes'
import style from 'snabbdom/modules/style'
import classModule from 'snabbdom/modules/class'
// import class from 'snabbdom/modules/class'
import eventlisteners from 'snabbdom/modules/eventlisteners'
import { originalData } from './data'
// 使用init注册模块生成patch方法
const patch = init([attributes, style, classModule, eventlisteners])
// 数据模型
let data = [
    ...originalData
];

// 应用状态及配置
let vnode; // 老的虚拟节点
let nextKey = 11;  // 新增交互的索引
let margin = 8; // 列表项间距
let sortBy = 'rank'; // 初始排序类型
var totalHeight = 0;  // 初始list高度

// 交互
function changeSort(prop) {
    sortBy = prop;
    data.sort((a, b) => {
        if (a[prop] > b[prop]) {
            return 1;
        }
        if (a[prop] < b[prop]) {
            return -1;
        }
        return 0;
    });
    render();
}

function add() {
    var n = originalData[Math.floor(Math.random() * 10)];
    data = [{ rank: nextKey++, title: n.title, desc: n.desc, elmHeight: 0 }].concat(data);
    render();
    render();
}

function remove(movie) {
    data = data.filter((m) => { return m !== movie; });
    render();
}

// 应用入口组件
function view(data) {
    return (h('div#app', [
        h('h1', 'Top 10 movies'),
        h('div', [
            h('a.btn.add', { on: { click: add } }, 'Add'),
            'Sort by: ',
            h('span.btn-group', [
                h('a.btn.rank', { class: { active: sortBy === 'rank' }, on: { click: [changeSort, 'rank'] } }, 'Rank'),
                h('a.btn.title', { class: { active: sortBy === 'title' }, on: { click: [changeSort, 'title'] } }, 'Title'),
                h('a.btn.desc', { class: { active: sortBy === 'desc' }, on: { click: [changeSort, 'desc'] } }, 'Description'),
            ]),
        ]),
        h('div.list', { style: { height: totalHeight + 'px' } }, data.map(movieView))
    ]))
}
// 列表项组件
function movieView(movie) {
    return h('div.row', {
        key: movie.rank,
        style: {
            opacity: '0', transform: 'translate(-200px)',
            delayed: { transform: `translateY(${movie.offset}px)`, opacity: '1' },  // 渲染状态
            remove: { opacity: '0', transform: `translateY(${movie.offset}px) translateX(200px)` } // 移除状态
        },
        hook: { insert: (vnode) => { movie.elmHeight = vnode.elm.offsetHeight; } },
    }, [
        h('div', { style: { fontWeight: 'bold' } }, movie.rank),
        h('div', movie.title),
        h('div', movie.desc),
        h('div.btn.rm-btn', { on: { click: [remove, movie] } }, 'x'),
    ]);
}

// 应用渲染
function render() {
    data = data.reduce((acc, m) => {
        var last = acc[acc.length - 1];
        m.offset = last ? last.offset + last.elmHeight + margin : margin;
        return acc.concat(m);
    }, []);
    totalHeight = data[data.length - 1].offset + data[data.length - 1].elmHeight;
    vnode = patch(vnode, view(data));
}

window.addEventListener('DOMContentLoaded', () => {
    let container = document.getElementById('app');
    vnode = patch(container, view(data));
    console.log(vnode)
    render();
});